<template>
	<view class="cart">
		<cu-custom bgColor="bg-white"><block slot="content">购物车</block></cu-custom>
		<view v-if="!cartList || cartList.length<1" class='empty'>
		   <view style="margin-top: 200upx;text-align: center">
			   <view class="cuIcon-calendar" style="font-size: 30px;"></view>
			   <view class="text-cut text-lg margin-top-sm" v-if="!izLogin">查看购物车,请先登录</view>
			   <view class="text-cut text-lg margin-top-sm" v-else>购物车为空，快去添加商品吧~</view>
			   <button class="cu-btn round shadow line-theme margin-top" @tap='Gohome'>去逛逛</button>
			   <button class="cu-btn round shadow line-theme margin-top margin-left" @tap='goLogin' v-if="!izLogin">去登录</button>
		   </view>
		</view>
		<view v-else>
			<scroll-view scroll-y="true" style="padding-bottom: 68px;">
				<view class='top'>
					<view @tap="emptyCart">
						<text class="cuIcon-delete text-theme margin-lr-xs"></text><text>清空购物车</text>
					</view>
				</view>
				<view class="cu-list menu card-menu margin-top"  v-for="(seller,index) in cartList" :key="index" >
					<view class="cu-item"  style="padding-top: 10px;">
						<view class="content flex align-center">
							<view class="flex align-center">
								<text class="cuIcon-shop text-theme" style="font-size: 18px;"></text>
								<text class="text-black text-bold text-df title_line_2 margin-left-sm" style="flex:1; line-height: 32rpx;">{{seller.shopr_name}}</text>
							</view>
						</view>
					</view>
					<view class="cu-list menu move-cur bg-white">
						<view class="cu-item bg-white margin-bottom-xs" style="padding:10px 10px 0;" v-for="(sku,index1) in seller.sku_list" :key="index1" 
						@touchstart="ListTouchStart" @touchmove="ListTouchMove" 
						@touchend="ListTouchEnd" :data-target="'move-box-' + index1" :class="modalName=='move-box-'+ index1?'move-cur':''">
							<view class="margin-right-sm">
							  <icon v-if="sku.checked===1" type="success" color="#ac71cb" @tap="sigleCheck(sku,index,index1)"/>
							  <icon v-else type="circle" @tap="sigleCheck(sku,index,index1)"/>
							</view>
							<view class="flex" style="flex:1;padding-bottom: 20rpx;" :style="index1<seller.sku_list.length-1?'border-bottom: 1px solid #eee;':''">
								<view class="cu-avatar radius" :style="'background-image:url('+sku.goods_image+');width:90px;height:90px'"  @tap="goodsDetail(sku.goods_id)"></view>
								<view class="flex-column" style="flex:1;">
									<view class="content margin-left" style="height: 180upx;display: flex;flex-direction: column;" @tap="goodsDetail(sku.goods_id)">
										<view class="flex align-start">
											<view class="text-df title_line_2" style="line-height: 30upx;font-weight: 600;">{{sku.name}}</view>
										</view>
										<view class="text-gray" v-if="sku.spec_list[0]">
											<text class="radius" style="background-color: #eee;padding: 3px 4px;font-size: 22upx;">
												{{sku.spec_list[0].spec_value}}{{sku.spec_list[0].spec_name}}
											</text>
										</view>
										<view class='flex'>
											<view class="flex goodsPrice align-end" style="flex:1;margin-top: 10rpx;vertical-align: bottom;">
												<text class="text-xs" style="color: #333;">妲粉价:</text>￥{{formatPrice(sku.cost) || '0.00'}}
												<text class="text-xs margin-left-sm" style="color: #333;">售价:￥{{formatPrice(sku.original_price) || '0.00'}}</text>
											</view>
										</view>
									</view>
									<view style="flex:1;display: flex;justify-content: flex-end;align-items: flex-end;">
										<view class="flex align-center" style="border-radius: 6rpx;overflow: hidden;">
											<view class="cart-stepper" @tap="minus(sku,index)">
												<view class="sbtn cuIcon-move text-black"></view>
												<!-- <text class="sbtn text-lg">-</text> -->
											</view>
											<view class="cart-stepper text-black">
												<text class="text-sm cartnum" style="" v-model="sku.num">{{sku.num}}</text>
											</view>
											<view class="cart-stepper" @tap="plus(sku,index)">
												<!-- <text class="sbtn text-lg">+</text> -->
												<view class="sbtn cuIcon-add text-black"></view>
											</view>
										</view>
										<!-- <view>
											<text v-model="sku.num">{{sku.num}}</text>
										</view> -->
										<!-- <van-stepper style="color:#333" :value="sku.num" input-width="24px" button-size="20px" disable-input="false" min="1" max="99" @change="changeStepper(index,index1,sku.num)" @plus="plus(sku,index)" @minus="minus(sku,index)"/> -->
									</view>
								</view>
							</view>
							<view class="move" @tap="DEL_Order(sku.sku_id)">
								<view class="bg-red">删除</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view>
				<view class="cu-bar bg-white tabbar foot border shop">
					<view class='allCheck' style="width:80px;">
						<icon v-if="selectAllStatus" type="success_circle" color="#ac71cb" @tap="selectAll"/>
						<icon v-else type="circle" color="#ac71cb" @tap="selectAll"/>
						<text class="allText">全选</text>
					</view>
					<view class="padding flex justify-between" style="width: 100%;">
						<view class="flex align-center">
							<view class="text-sm">合计:</view><view class="text-bold text-df text-black">￥{{formatPrice(total_price)}}</view>
						</view>
						<button class="cu-btn bg-red round shadow-blur" @tap="onClickButton">立即购买</button>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import * as Cart_API from '@/api/cart.js'
	import * as Foundation from '@/utils/Foundation.js'
	export default {
		data() {
			return {
				isTop: true,
				bottomBar:true,           //默认底部导航
				hasList: false,          // 列表是否有数据
				selectAllStatus: false,    // 全选状态，默认全选
				totalPrice:0,    //总价
				cartList:[],
				total_price:0,
				seletedList:[],
				list:0 ,//购物车数量,
				buyGoodsNum:0,
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				id:'',
				state: 2,
				addList:[],
				CartData:[],
				izLogin:false,
				izMember:uni.getStorageSync('role').member_role_id?true:false
			};
		},
		onLoad(){
		    
		},
		onShow() {
			let token =uni.getStorageSync('token')
			if(token){
				this.GET_CartList()
				this.izLogin = true
			}
		},
		watch:{
			selectAllStatus(newVal){
				this.selectAllStatus = newVal
			},
			// cartList(newVal){
			// 	console.log('newVal',newVal)
			// 	this.cartList =[]
			// 	this.cartList = newVal
			// }
		},
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.GET_CartList()
			}, 200);
		},
		methods:{
			formatPrice(price){
				return Foundation.formatPrice(price)
			},
			goLogin(){
				if(!uni.getStorageSync('isCanUse')){
					uni.navigateTo({url:'../login/login'})
				}else{
					uni.navigateTo({url: '../login/register'})
				}
			},
			goodsDetail(goods_id){
				uni.navigateTo({
					url:"/pages/goods/goods?goods_id="+goods_id
				})
			},
			GET_CartList(){
				let that = this
				Cart_API.GetAllCart().then(res =>{
					this.cartList=[]
					this.CartData = res
					this.cartList = res.cart_list
					this.total_price = res.total_price.total_price
					if(res.cart_list){
						// 多店铺
						let checked = true
						res.cart_list.map(item =>{
							item.sku_list.map(key =>{
								if(key.checked === 0){
									checked = false
								}
							})
							this.list+=1
						})
						if(checked){
							this.selectAllStatus = true
						}else{
							this.selectAllStatus = false
						}
					}
				})
			},
			// 减去商品
			minus(item,index){
				if(item.num<=1){
					return;
				}
				let params = {
					num :item.num-1
				}
				this.CartUpdate(item.sku_id,params)							 // 重新获取总价
			},
			// 加
			plus(item,index){                            // 重新获取总价
			   let params = {
			   	 num : item.num+1
			   }
			   setTimeout(()=>{
				    this.CartUpdate(item.sku_id,params)
			   },200)
			},
			changeStepper(index,index1,e){
				// console.log('12',e,index,index1)
				// console.log(this.cartList[index].sku_list[index1].num)
				// // this.cartList[index].sku_list[index1].num = e
				// console.log('this.cartList',this.cartList)
			},
			 // 单选
			sigleCheck(sku,selleridx,skuidx){
			   let checked
			   if(sku.checked===1) checked = 0
			   else checked =1
			   let parmas = {
				   checked : checked,
				   num :sku.num
			   }
			   this.CartUpdate(parseInt(sku.sku_id),parmas)                         // 重新获取总价
			},
			CartUpdate(sku_id,params){
				Cart_API.CartUpdate(sku_id,params).then(res =>{
					if(res === 'SUCCESS'){
						this.GET_CartList()
					}else{
						uni.showToast({
							icon:'none',
							title:res.response.data.message,
							duration:2000
						})
					}
					
				}).catch((rej)=>{
					console.log('rej',rej)
				})
				// setTimeout(()=>{wx.hideLoading()},500)
			},
			 // 全选
			selectAll(e) {
				this.selectAllStatus = !this.selectAllStatus
				let params = {
				   checked:this.selectAllStatus?1:0,
				}
				Cart_API.CartCheckAll(params).then(res =>{
					this.GET_CartList()
				})
			},
			// 清空购物车
			emptyCart(){
				uni.showModal({
					title: '删除提示',
					content: '您确定要清空购物车吗?',
					success: (res)=>{
						if (res.confirm) {
							Cart_API.DeleteCart().then(res =>{
								if(res === 'Success'){
									uni.showToast({
										icon:'success',
										title:'已清空'
									})
									let cartList = this.cartList
									cartList = ''
									this.cartList = cartList				
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			// 购买成功
			onClickButton() {
				if(this.total_price>0){
					let CartData = this.CartData
					uni.setStorage({
						key:'buylist',
						data:CartData,
						success: () => {
							uni.navigateTo({
								url:'../goods/comfirmOrder'
							})
						}
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'请先选择需购买的商品'
					})
				}
			},
			Gohome(){
			  uni.switchTab({
			    url: '../home/home'
			  })
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				console.log(this.listTouchStart,e.touches[0].pageX)
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart+40 > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			// 删除某一个商品
			DEL_Order(sku_id){
				uni.showModal({
					title: '',
					content: '你确定将该商品移除购物车吗?',
					success: (res)=>{
						if (res.confirm) {
							Cart_API.DeleteCartGoods(sku_id).then(res =>{
								uni.showToast({
									icon:'success',
									title:'已移除购物车'
								})
								this.GET_CartList()
							})
						}
					}
				})
			}	
		}
	}
</script>

<style lang="scss">
	/deep/ .cu-list>.cu-item .move {
		width: 120upx;
	}
	/deep/ .cu-list>.cu-item.move-cur {
		transform: translateX(-120upx)
	}
.cart{
  background: $background-container;
  height: 100vh;
}
.top{
  color: #666;
  background: #fff;
  padding: 20upx 20upx;
  font-size: 32upx;
  display: flex;
  justify-content: space-between;
}
.top .wap-nav{
  vertical-align: middle;
  padding-right:16upx;
}
.delete{
  padding-right:16upx;
  margin-left: 20upx; 
}
.compute,.cartGoods{
  display: flex;
  align-cartList: center;
}
.cartGoods{
  justify-content: space-between;
}
.cartGoods{
  background: #fff;
  margin-top: 20upx;
  padding: 10px 0;
}
.goodsImg image{
  width: 160upx;
  height: 160upx
}

.goodsDetail{
  margin:0 30upx;
  flex: 1;
}
.goodsName{
  color: #666;
 font-size: 28upx;
  width: 51%;
}
.details{
  height: 100%;
  overflow: hidden;
  display: flex;
}
.goodsPrice{
 font-size: 30upx;
  color: red;
  font-weight: bold;
  // display: inline-block;
  // width: 200upx;
}
.operate{
  display: flex;
  // margin-top:30upx;
  height: 60upx;
  justify-content: space-around;
  font-size: 20upx;
}

.sigleCheck{
  margin: 0 20upx;
}
.allCheck{
  margin-left: 20upx;
}
.allCheck icon{
  vertical-align: middle;
  padding-right:10upx;
}
.empty{
  width: 100%;
  height: 85vh;
  display: flex;
  justify-content: center;
  align-cartList: center;
  color: #666;
  font-size: 28upx;
  padding-bottom: 80upx;
}
.emptyBox{
	width: 100vh;
	height: 100vh;
	background: #fff;
}
.empty_text{
  padding: 10upx 0 30upx 0;
  text-align: center;
}
.empty_pic{
 width:180upx;
 height:180upx;
}
.Gohome .van-button--large{
  height: 70upx;
  width: 240upx;
  background: $color-main;
  border: 1px solid $color-main;
  line-height: 68px;
  font-size: 32upx;
}
.submitBar .van-button--danger{
  // border: 1px solid #6167e9;
  // background: #6167e9;
}
/deep/.cu-list.menu>.cu-item:after {
		border-bottom: none;
		height: 60upx;
	}
	/deep/.cu-list.menu>.cu-item  {
	min-height: 80rpx;
	}
	/deep/.cu-list.menu>.cu-item .content>text[class*=cuIcon] {
		width: 18px;
		text-align: left;
	}
	/deep/.cu-list+.cu-list {
		margin-top: 0;
	}
	.cart-stepper{
		background: #f3f3f3;
		// margin-left:4rpx;
		// border-radius: 6rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.cartnum{
			border-left: 5rpx solid #fff;
			border-right: 5rpx solid #fff;
			padding:10rpx 14rpx;
		}
		.sbtn{
			padding:10rpx 4rpx;
			color: #333;
		}
	}
</style>
